<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highsecondary" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>测试</title>
    <!-- <link href="lib/css/meterial-icons.css" rel="stylesheet"> -->
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    <style>
      /* table { width: 100% } */
      td { text-align: center }

      table.table-1 tr td:nth-child(1) { width: 10% }
      table.table-1 tr td:nth-child(2) { width: 14% }
      table.table-1 tr td:nth-child(3) { width: 10% }
      table.table-1 tr td:nth-child(4) { width: 14% }
      table.table-1 tr td:nth-child(5) { width: 42% }

    </style>
  </head>
  <body>
    <div id="test" v-cloak class="q-pa-sm">
      <q-tabs inverted color="primary" v-model="selectedTab">
        <q-tab slot="title" name="tab-1" label="基本信息"></q-tab>
        <q-tab slot="title" name="tab-2" label="设计成本"></q-tab>
        <q-tab slot="title" name="tab-3" label="材料成本"></q-tab>
        <q-tab slot="title" name="tab-4" label="机加工成本"></q-tab>
        <q-tab slot="title" name="tab-5" label="人工/其它加工成本"></q-tab>

        <q-tab-pane name="tab-1" class="q-pa-none">
          <div class="q-table-container q-table-dense no-shadow q-pt-md">
            <table class="table-1 q-table q-table-cell-separator">
              <tbody>
                <tr>
                  <td>零部件供应商</td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>模具供应商</td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td rowspan="24"></td>
                </tr>
                <tr>
                  <td>联系人</td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>联系人</td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>电话/传真</td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>电话/传真</td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>邮箱</td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>邮箱</td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>总成</td>
                  <td colspan="3">
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>零件名称/编号</td>
                  <td colspan="3">
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>模具类型</td>
                  <td colspan="3">
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td rowspan="9">模具尺寸（mm）</td>
                  <td>长</td>
                  <td>宽</td>
                  <td>高</td>
                </tr>
                <tr>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>模具重量（吨）</td>
                  <td colspan="3">
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>模具型腔数</td>
                  <td colspan="3">
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>模具寿命（万次）</td>
                  <td colspan="3">
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>产品外形尺寸</td>
                  <td colspan="3">
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td rowspan="2">交货期L/T(天）</td>
                  <td>第一次试模</td>
                  <td>第二次试模</td>
                  <td>正式交付</td>
                </tr>
                <tr>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                  <td>
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>交货地点</td>
                  <td colspan="3">
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
                <tr>
                  <td>交货保险担当</td>
                  <td colspan="3">
                    <q-input hide-underline v-model="baseInfoForm.form.col1"></q-input>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </q-tab-pane>
        <q-tab-pane name="tab-2" class="q-pa-none">
          <div class="q-table-container q-table-dense">
            <table class="table-2 q-table q-table-cell-separator">
              <tbody>
                <tr>
                  <td>工序</td>
                  <td>工时</td>
                  <td>单价</td>
                  <td>金额</td>
                  <td>比例%</td>
                </tr>
                <tr v-for="item in designForm.form.rows" :key="item.name">
                  <td>{{ item.name }}</td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col1"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col2"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col3"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col4"></q-input>
                  </td>
                </tr>
                <tr>
                  <td colspan="3">合计</td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="designForm.total"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="designForm.ratio"></q-input>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </q-tab-pane>
        <q-tab-pane name="tab-3" class="q-pa-none">
          <div class="q-table-container q-table-dense">
            <table class="table-3 q-table q-table-cell-separator">
              <tbody>
                <tr>
                  <td>类别</td>
                  <td>明细</td>
                  <td>厂家/品牌</td>
                  <td>型号/规格</td>
                  <td>数量/重量(kg)</td>
                  <td>单价</td>
                  <td>总价</td>
                  <td>比例%</td>
                </tr>
                <tr v-for="(item, index) in meterialForm.form.typeOne.rows" :key="item.detail+index">
                  <td v-if="index === 0" :rowspan="meterialForm.form.typeOne.rows.length">{{ meterialForm.form.typeOne.name }}</td>
                  <td>{{ item.detail }}</td>
                  <td>
                    <q-input align="center" hide-underline v-model="item.col1"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline v-model="item.col2"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col3"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col4"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col5"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col6"></q-input>
                  </td>
                </tr>
                <tr v-for="(item, index) in meterialForm.form.typeTwo.rows" :key="item.detail+index">
                  <td v-if="index === 0" :rowspan="meterialForm.form.typeTwo.rows.length">{{ meterialForm.form.typeTwo.name }}</td>
                  <td>{{ item.detail }}</td>
                  <td>
                    <q-input align="center" hide-underline v-model="item.col1"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline v-model="item.col2"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col3"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col4"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col5"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col6"></q-input>
                  </td>
                </tr>
                <tr v-for="(item, index) in meterialForm.form.typeThree.rows" :key="item.index">
                  <td colspan="4">{{ meterialForm.form.typeThree.name }}</td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col3"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col4"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col5"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col6"></q-input>
                  </td>
                </tr>
                <tr v-for="(item, index) in meterialForm.form.typeFour.rows" :key="item.index">
                  <td colspan="4">{{ meterialForm.form.typeFour.name }}</td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col3"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col4"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col5"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col6"></q-input>
                  </td>
                </tr>
                <tr v-for="(item, index) in meterialForm.form.typeFive.rows" :key="item.index">
                  <td colspan="4">{{ meterialForm.form.typeFive.name }}</td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col3"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col4"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col5"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col6"></q-input>
                  </td>
                </tr>
                <tr v-for="(item, index) in meterialForm.form.typeSix.rows" :key="item.index">
                  <td colspan="4">{{ meterialForm.form.typeSix.name }}</td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col3"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col4"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col5"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col6"></q-input>
                  </td>
                </tr>
                <tr v-for="(item, index) in meterialForm.form.typeSeven.rows" :key="item.index">
                  <td colspan="4">{{ meterialForm.form.typeSeven.name }}</td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col3"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col4"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col5"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col6"></q-input>
                  </td>
                </tr>
                <tr>
                  <td colspan="6">合计</td>
                  <td>
                    <q-input align="center" hide-underline v-model="meterialForm.total"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline v-model="meterialForm.ratio"></q-input>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </q-tab-pane>
        <q-tab-pane name="tab-4" class="q-pa-none">
          <div class="q-table-container q-table-dense">
            <table class="table-4 q-table q-table-cell-separator">
              <tbody>
                <tr>
                  <td>工序</td>
                  <td>工时</td>
                  <td>工费</td>
                  <td>金额</td>
                  <td>比例%</td>
                </tr>
                <tr v-for="item in machineForm.form.rows" :key="item.name">
                  <td>{{ item.name }}</td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col1"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col2"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col3"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col4"></q-input>
                  </td>
                </tr>
                <tr>
                  <td colspan="3">合计</td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="machineForm.total"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="machineForm.ratio"></q-input>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </q-tab-pane>
        <q-tab-pane name="tab-5" class="q-pa-none">
          <div class="q-table-container q-table-dense">
            <table class="table-5 q-table q-table-cell-separator">
              <tbody>
                <tr>
                  <td>工序</td>
                  <td>工时</td>
                  <td>工费</td>
                  <td>金额</td>
                  <td>比例%</td>
                </tr>
                <tr v-for="item in personForm.form.rows" :key="item.name">
                  <td>{{ item.name }}</td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col1"></q-input>
                  </td>
                  <td>
                    <q-input align="center" hide-underline type="number" v-model="item.col2"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col3"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="item.col4"></q-input>
                  </td>
                </tr>
                <tr>
                  <td colspan="3">合计</td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="personForm.total"></q-input>
                  </td>
                  <td>
                    <q-input readonly align="center" hide-underline v-model="personForm.ratio"></q-input>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </q-tab-pane>
      </q-tabs>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance2.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sor/sorPreview.js"></script>
    <!--  -->
    <script src="../script/utils.js"></script>
    <!-- s -->
    <script src="../components/h-select-table.js"></script>
    <script src="../components/h-select-tree.js"></script>
    <script src="../components/h-form-table.js"></script>

    <script>
			// quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])
      Vue.use(window.vuelidate.default)
      var minLength = window.validators.minLength
      var required = window.validators.required
			new Vue({
				el: '#test',
				data: function() {
					return {
            selectedTab: 'tab-1',
            baseInfoForm: {
              name: '基本信息',
              tempItemCode: 'BASE_INFO',
              form: {
                col1: ''
              }
            },
            // table 2
            designForm: {
              name: '设计成本',
              tempItemCode: 'DESIGN',
              form: {
                rows:[
                  {
                    name: '模具设计',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: '',
                  }
                ]
              },
              total: 0,
              ratio: '0.00%'
            },
            // table 3
            meterialForm: {
              name: '材料成本',
              tempItemCode: 'RAW_MAT',
              form: {
                typeOne: {
                  name: '模具钢',
                  rows: [
                    {
                      detail: '模 架',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '型 腔',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '型 芯',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '镶 件',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '滑 块',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '斜顶杆',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '其 它',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    }
                  ]
                },
                typeTwo: {
                  name: '暂无',
                  rows: [
                    {
                      detail: '定位/导向',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '脱模/顶出',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '冷 却',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '紧 固',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '弹 簧',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '油 缸',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '气 缸',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '浇道/热流道',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    },
                    {
                      detail: '其 它',
                      col1: '',
                      col2: '',
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    }
                  ]
                },
                typeThree: {
                  name: '铍 铜',
                  rows: [
                    {
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    }
                  ]
                },
                typeFour: {
                  name: '铝 合 金',
                  rows: [
                    {
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    }
                  ]
                },
                typeFive: {
                  name: '隔热材料',
                  rows: [
                    {
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    }
                  ]
                },
                typeSix: {
                  name: '紫 铜',
                  rows: [
                    {
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    }
                  ]
                },
                typeSeven: {
                  name: '石 墨',
                  rows: [
                    {
                      col3: '',
                      col4: '',
                      col5: '',
                      col6: ''
                    }
                  ]
                }
              },
              total: 0,
              ratio: '0.00%'
            },
            // table 4
            machineForm: {
              name: '机加工成本',
              tempItemCode: 'MACHINE',
              form: {
                rows: [
                  {
                    name: 'CNC（普通）',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: 'CNC（五轴/3+2）',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '电火花',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '镜面电火花',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '线切割',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '慢丝线切割',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '深孔钻',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '普通机加工',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  }
                ]
              },
              total: 0,
              ratio: '0.00%'
            },
            // table 5
            personForm: {
              name: '人工/其它加工成本',
              tempItemCode: 'OTHERS',
              form: {
                rows: [
                  {
                    name: '钳工',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '抛光',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '皮纹',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '表面处理',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '特种热处理',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '三坐标测量',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '物流运输',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  },
                  {
                    name: '试模费用',
                    col1: '',
                    col2: '',
                    col3: '',
                    col4: ''
                  }
                ]
              },
              total: 0,
              ratio: '0.00%'
            },
          }
        },
        validations:{
          
        },
				computed: {
          
        },
        watch: {
          'designForm.form.rows': {
            handler: function(rows) {
              var that = this, colsum = 0
              rows.forEach(function(row) {
                if (row.col1 != '' && row.col2 != '') {
                  row.col3 = row.col1 * row.col2
                } else {
                  row.col3 = ''
                }
                colsum += row.col3
              })
              this.designForm.total = colsum
              // 计算单条比例
              rows.forEach(function(row) {
                if (row.col1 != '' && row.col2 != '') {
                  row.col3 = row.col1 * row.col2
                  row.col4 = row.col3 / that.designForm.total * 100?row.col3 / that.designForm.total * 100 + '%': ''
                } else {
                  row.col3 = ''
                  row.col4 = ''
                }
              })
            },
            deep: true
          },
          'meterialForm.form': {
            handler: function(form) {
              var that = this, colsum = 0
              form.typeOne.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                } else {
                  row.col5 = ''
                }
                colsum += row.col5
                colsum = colsum * 1
              })
              form.typeTwo.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                } else {
                  row.col5 = ''
                }
                colsum += row.col5
                colsum = colsum * 1
              })
              form.typeThree.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                } else {
                  row.col5 = ''
                }
                colsum += row.col5
                colsum = colsum * 1
              })
              form.typeFour.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                } else {
                  row.col5 = ''
                }
                colsum += row.col5
                colsum = colsum * 1
              })
              form.typeFive.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                } else {
                  row.col5 = ''
                }
                colsum += row.col5
                colsum = colsum * 1
              })
              form.typeSix.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                } else {
                  row.col5 = ''
                }
                colsum += row.col5
                colsum = colsum * 1
              })
              form.typeSeven.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                } else {
                  row.col5 = ''
                }
                colsum += row.col5
                colsum = colsum * 1
              })
              this.meterialForm.total = colsum
              // 计算单条比例
              form.typeOne.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                  row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
                } else {
                  row.col5 = ''
                  row.col6 = ''
                }
              })
              form.typeTwo.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                  row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
                } else {
                  row.col5 = ''
                  row.col6 = ''
                }
              })
              form.typeThree.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                  row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
                } else {
                  row.col5 = ''
                  row.col6 = ''
                }
              })
              form.typeFour.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                  row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
                } else {
                  row.col5 = ''
                  row.col6 = ''
                }
              })
              form.typeFive.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                  row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
                } else {
                  row.col5 = ''
                  row.col6 = ''
                }
              })
              form.typeSix.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                  row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
                } else {
                  row.col5 = ''
                  row.col6 = ''
                }
              })
              form.typeSeven.rows.forEach(function(row) {
                if (row.col3 != '' && row.col4 != '') {
                  row.col5 = row.col3 * row.col4
                  row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
                } else {
                  row.col5 = ''
                  row.col6 = ''
                }
              })
            },
            deep: true
          },
          'machineForm.form.rows': {
            handler: function(rows) {
              var that = this, colsum = 0
              rows.forEach(function(row) {
                if (row.col1 != '' && row.col2 != '') {
                  row.col3 = row.col1 * row.col2
                } else {
                  row.col3 = ''
                }
                colsum += row.col3
              })
              this.machineForm.total = colsum
              // 计算单条比例
              rows.forEach(function(row) {
                if (row.col1 != '' && row.col2 != '') {
                  row.col3 = row.col1 * row.col2
                  row.col4 = row.col3 / that.machineForm.total * 100?row.col3 / that.machineForm.total * 100 + '%': ''
                } else {
                  row.col3 = ''
                  row.col4 = ''
                }
              })
            },
            deep: true
          },
          'personForm.form.rows': {
            handler: function(rows) {
              var that = this, colsum = 0
              rows.forEach(function(row) {
                if (row.col1 != '' && row.col2 != '') {
                  row.col3 = row.col1 * row.col2
                } else {
                  row.col3 = ''
                }
                colsum += row.col3
              })
              this.personForm.total = colsum
              // 计算单条比例
              rows.forEach(function(row) {
                if (row.col1 != '' && row.col2 != '') {
                  row.col3 = row.col1 * row.col2
                  row.col4 = row.col3 / that.personForm.total * 100?row.col3 / that.personForm.total * 100 + '%': ''
                } else {
                  row.col3 = ''
                  row.col4 = ''
                }
              })
            },
            deep: true
          }
        },
        created () {
        },
				methods: {
          
				}
			})
    </script>
  </body>
</html>